<template>
    {{ '平均分:' + avr() }}
    <br/>
    {{ '平均分:' + avr() }}
    <br/>
    {{ '平均分:' + avr() }}
    <br/>
    {{ '平均分:' + avr2 }}
    <br/>
    {{ '平均分:' + avr2 }}
    <br/>
    {{ '平均分:' + avr2 }}
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const arr = reactive([
    {id: 1, name: '张三', score: 80},
    {id: 2, name: '李四', score: 70},
    {id: 3, name: '王五', score: 90}
])
// 函数在Mustache模板语法中具有响应式的特性
// 函数会重复计算
const avr = () => {
    console.log('函数计算')
    let total = arr.reduce((total, item)=> total += item.score, 0)
    return total / arr.length
}
// 定义计算属性
// 计算属性，多次使用时仍然知会计算一次
const avr2 = computed(() => {
    console.log('计算属性')
    let total = arr.reduce((total, item)=> total += item.score, 0)
    return total / arr.length
})
// 计算属性在JS代码中，访问其真实值需要访问其value属性
// 参考ref函数定义的响应式数据
console.log(avr2.value + 100)
</script>
<style scoped>
    
</style>